<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <canvas width="600", height="400" id="test"></canvas>
  <script>
    let ctx = test.getContext('2d');
    ctx.save()
    //ctx.translate(200, 200)
    //ctx.translate(200, 200)
    //ctx.rotate(45 * Math.PI / 180)
    //ctx.translate(-25, - 25)
    ctx.translate(0, 100)
    ctx.rotate(-90 * Math.PI / 180)
    ctx.scale(0.5, 0.5)
    ctx.fillRect(0,50,100,100);


    ctx.restore()

    ctx.font = '16px/100px Arial'
    ctx.fillText('hello world',0 ,26)

    // ctx.save()
    // ctx.rect(50, 50, 200, 200)
    // ctx.clip()
    // ctx.clearRect(0, 0, 600, 400)
    // ctx.restore()

//     ctx.save()
//     ctx.translate(200, 200)
//     ctx.translate(-25, - 25)
//     ctx.fillRect(0,0,50,50);

//     ctx.rect(150,100,50,50);
//     ctx.lineWidth = 1;
//     ctx.stroke();
//     ctx.restore()

// ctx.save()
// ctx.beginPath()
// //ctx.arc(100,100,50,0,Math.PI);
// ctx.rect(100,100,100,100);
// ctx.clip()
// ctx.beginPath()
// ctx.translate(-100, -100)
// ctx.rotate(45)
// ctx.rect(100,100,100,100);
// ctx.fill();

  </script>
</body>
</html>